<template>
<div class="c-table">
    <div class="projects-title">
      <div class="projects-title-corj">
        <h1>项目列表</h1>
        <div class="projects-identity" v-if="identity==2">
          <div :class="jlcxz==1?'cativite':''" @click="mycerate">我创建的</div>
          <div :class="jlcxz==2?'cativite':''" @click="myimplement">我执行的</div>
          <div :class="jlcxz==3?'cativite':''" @click="ccmytask">抄送给我</div>
          <div :class="jlcxz==4?'cativite':''" @click="department">部门项目</div>
        </div>

        <div class="projects-identity" v-if="identity==3">
          <div :class="jlcxz==1?'cativite':''" @click="mycerate">我创建的</div>
          <!-- <div :class="jlcxz==2?'cativite':''" @click="myimplement">我执行的</div> -->
          <div :class="jlcxz==3?'cativite':''" @click="ccmytask">抄送给我</div>
          <div :class="jlcxz==4?'cativite':''" @click="department">全部项目</div>
        </div>

        <div class="projects-identity" v-if="identity==1">
          <div :class="jlcxz==2?'cativite':''" @click="myimplement">我执行的</div>
          <div :class="jlcxz==3?'cativite':''" @click="ccmytask">抄送给我</div>
        </div>
      </div>

      

        <div  class="shuorsou"> 
          <div class="dchu-exel" @click="exportClick">导出数据</div>
          <div v-on:click="isshowsearch = !isshowsearch"><img src="../../common/image/sousuo.png" alt=""></div></div>
    </div>
    <!-- v-if="isshowsearch" -->
    <transition name="fade">
    <div class="c-shousuo" v-show="isshowsearch" >

        <div><span class="c-input-name">项目名称:</span>
            <el-input
            v-model="projectName"
           
            size="large"
            placeholder="Please Input"
            :suffix-icon="Search"
            />
        </div>
         <div><span class="c-input-name">项目状态:</span>
         <el-select v-model="select" placeholder="Select" 
         :popper-append-to-body="false" 
         >
          <el-option label="Restaurant" value="1" />
          <el-option label="Order No." value="2" />
          <el-option label="Tel" value="3" />
        </el-select>
        </div>

        <div><span class="c-input-name">开始时间:</span>
         <el-date-picker
        v-model="beginDate"
        type="date"
        placeholder="Pick a day"
       size="large"
      />
        </div>

         <div><span class="c-input-name">结束时间:</span>
         <el-date-picker
        v-model="endDate"
        type="date"
        placeholder="Pick a day"
        size="large"
      />
        </div>

        <!-- <div><span class="c-input-name">创建人:</span>
            <el-input
            v-model="projectName"
            size="large"
            placeholder="Please Input"
            :suffix-icon="Search"
            />
        </div> -->


        <div class="c-bt-project">
            <div class="c-query">查询</div>
            <div class="c-reset">重置</div>
        </div> 
        </div>

        </transition>
     <div class="c-liunt"></div>

   <el-table  v-if="getdatas.selectType==1" :data="tableData" 
   @row-click='cellclick'>
    <el-table-column label="编号" prop="index" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="项目名称" prop="projectName" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="项目描述" prop="projectDescribe" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="开始时间" prop="projectBeginDate" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="截止时间" prop="projectEndDate" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="项目状态" prop="projectStatus" show-overflow-tooltip='isoverflow'/>
    
    

    <!-- <el-table-column label="执行者" prop="name" show-overflow-tooltip='isoverflow'/> -->



    <!-- <el-table-column align="right" width="50px"> -->
      <!-- <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template> -->
      <div class=""><img src="../../common/image/shuangdian.png" alt=""></div>
      <!-- <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >dsdsa</el-button
        > -->
        
        <!-- <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        > -->
      <!-- </template> -->
    <!-- </el-table-column> -->
  </el-table>

    <el-table  v-if="getdatas.selectType==2" :data="tableData" 
   @row-click='cellclick'>
    <el-table-column label="编号" prop="index" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="任务名称" prop="projectName" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="任务描述" prop="projectDescribe" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="开始时间" prop="projectBeginDate" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="截止时间" prop="projectEndDate" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="任务状态" prop="taskStatus" show-overflow-tooltip='isoverflow'/>
    
    

    <!-- <el-table-column label="执行者" prop="name" show-overflow-tooltip='isoverflow'/> -->



    <!-- <el-table-column align="right" width="50px"> -->
      <!-- <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template> -->
      <div class=""><img src="../../common/image/shuangdian.png" alt=""></div>
      <!-- <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >dsdsa</el-button
        > -->
        
        <!-- <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        > -->
      <!-- </template> -->
    <!-- </el-table-column> -->
  </el-table>

  <el-table  v-if="getdatas.selectType==3" :data="tableData" 
   @row-click='cellclick'>
    <el-table-column label="编号" prop="index" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="任务名称" prop="projectName" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="任务描述" prop="projectDescribe" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="开始时间" prop="projectBeginDate" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="截止时间" prop="projectEndDate" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="项目状态" prop="projectStatus" show-overflow-tooltip='isoverflow'/>
    
    

    <!-- <el-table-column label="执行者" prop="name" show-overflow-tooltip='isoverflow'/> -->



    <!-- <el-table-column align="right" width="50px"> -->
      <!-- <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template> -->
      <div class=""><img src="../../common/image/shuangdian.png" alt=""></div>
      <!-- <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >dsdsa</el-button
        > -->
        
        <!-- <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        > -->
      <!-- </template> -->
    <!-- </el-table-column> -->
  </el-table>
  <el-table  v-if="getdatas.selectType==4" :data="tableData" 
   @row-click='cellclick'>
    <el-table-column label="编号" prop="index" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="任务名称" prop="projectName" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="任务描述" prop="projectDescribe" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="开始时间" prop="projectBeginDate" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="截止时间" prop="projectEndDate" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="项目状态" prop="projectStatus" show-overflow-tooltip='isoverflow'/>
    
    

    <!-- <el-table-column label="执行者" prop="name" show-overflow-tooltip='isoverflow'/> -->



    <!-- <el-table-column align="right" width="50px"> -->
      <!-- <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template> -->
      <div class=""><img src="../../common/image/shuangdian.png" alt=""></div>
      <!-- <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >dsdsa</el-button
        > -->
        
        <!-- <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        > -->
      <!-- </template> -->
    <!-- </el-table-column> -->
  </el-table>


  <el-table 
   id="my-table"
   :data="tableData2" 
   @row-click='cellclick' >
    <el-table-column label="编号" prop="index" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="项目名称" prop="projectName" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="项目描述" prop="projectDescribe" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="开始时间" prop="projectBeginDate" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="截止时间" prop="projectEndDate" show-overflow-tooltip='isoverflow'/>
    <el-table-column label="项目状态" prop="projectStatus" show-overflow-tooltip='isoverflow'/>
    
    

    <!-- <el-table-column label="执行者" prop="name" show-overflow-tooltip='isoverflow'/> -->



    <!-- <el-table-column align="right" width="50px"> -->
      <!-- <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template> -->
      <div class=""><img src="../../common/image/shuangdian.png" alt=""></div>
      <!-- <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >dsdsa</el-button
        > -->
        
        <!-- <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        > -->
      <!-- </template> -->
    <!-- </el-table-column> -->
  </el-table>
  <!-- 分页 -->
  <div class="c-pages-tb"><el-pagination
      v-model:currentPage="currentPage3"
      v-model:page-size="pageSize3"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="pagescount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /></div>

 <projectdetails ref="projectdetails"></projectdetails>
 <projectzt ref="projectzt"></projectzt>
</div>
</template>
<script >
import { computed,defineComponent, ref, reactive,defineEmits} from "vue";
import { Search } from '@element-plus/icons-vue';
import { useStore } from 'vuex'
import projectdetails from '@/views/project/projecttj.vue';
import projectzt from '@/views/project/ckprojectdetails.vue';
import {getLeaderTaskPage,getProjectDetails,getWorkAssignDetails,getExecuteTaskPage} from '../../api/api'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-loading.css';
import 'element-plus/theme-chalk/el-message.css';
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';
export default defineComponent({
  name: "project",
  props:{
    chartinfo: Array,
  },
  components: {
    projectdetails,
    projectzt,
  },
  setup(props,context){
  const jlcxz=ref(1)
    const store = useStore()
    //分页
    const pageSize3 = ref(100)
    //第几页
    const currentPage3 = ref(5)
    const pagescount =ref(0)

// input
const search = ref('')

// 表格
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)
const filterTableData2 = computed(() =>
  tableData2.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)
const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}

const isoverflow =true
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'John',
    address: 'No. 189, Grove St, Los Angelesdsadddddddddddddddsadaaaaaaaaaaaaaaaaadfsdf',
  },
  {
    date: '2016-05-04',
    name: 'Morgan',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const tableData2 = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'John',
    address: 'No. 189, Grove St, Los Angelesdsadddddddddddddddsadaaaaaaaaaaaaaaaaadfsdf',
  },
  {
    date: '2016-05-04',
    name: 'Morgan',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
])


//分页方法
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  getdatas.pageNo=val
  getproject(getdatas)
}
const isshowsearch=ref(false)
const issearchshow =()=>{
    isshowsearch.value=!isshowsearch.value
}
  const identity = computed(()=>{
   return store.state.identity
})
const getdatas=reactive({
  targetUserId:localStorage.getItem('userinfoId'),
  selectType:1,
  projectStatus:'',
  pageNo:1,
  pageSize:10,
  beginDate:'',
  endDate:'',
  projectName:'',
})
const mycerate= ()=>{

   getdatas.pageNo=1
   if(getdatas.selectType!=1){
    jlcxz.value=1
    getdatas.selectType=1
        getproject(getdatas)
   }
   console.log(getdatas)
   
}
const myimplement=()=>{
  getdatas.pageNo=1
  console.log('dsfdsf')


  if(identity.value==1){
    jlcxz.value=2
    getdatas.selectType=2
        getprojectzx(getdatas)
     console.log(getdatas)
  }else{
    jlcxz.value=2
    getdatas.selectType=2
        getproject(getdatas)
   console.log(getdatas)

  }
    
}
const ccmytask=()=>{
  if(identity.value==1){
    getdatas.pageNo=1
    jlcxz.value=3
    getdatas.selectType=3
        getprojectzx(getdatas)

  }else{
     getdatas.pageNo=1
    jlcxz.value=3
    getdatas.selectType=3
        getproject(getdatas)
  }
 
}
const department=()=>{
  getdatas.pageNo=1
    jlcxz.value=4
    getdatas.selectType=4
        getproject(getdatas)
}
//  获取数据 --管理层
const getproject =(getdatas)=>{
  getLeaderTaskPage(getdatas).then(res=>{
  console.log('res.data',res)
  pagescount.value=res.page.count
  currentPage3.value=res.page.pageNo
  pageSize3.value=res.page.pageSize

  let pageslist=[]
  if(getdatas.selectType==2){

    // 任务状态 (0待审核 1待领取 2进行中 3已完成 4已逾期)
     res.page.list.forEach((element,index) => {
    
    if(element.projectStatus==1){
      element.projectStatus='待领取'
    }else if(element.projectStatus==2){
      element.projectStatus='进行中 '
    }else if(element.projectStatus==3){
      element.projectStatus='已完成'
    }else if(element.projectStatus==0){
      element.projectStatus='待审核'
    }else if(element.projectStatus==4){
      element.projectStatus='已逾期'
    }
    element.index=index+1
    pageslist[index]=element
  });
  }else{
  res.page.list.forEach((element,index) => {
    
    if(element.projectStatus==1){
      element.projectStatus='进行中'
    }else if(element.projectStatus==2){
      element.projectStatus='已完成'
    }else if(element.projectStatus==3){
      element.projectStatus='已逾期'
    }
    element.index=index+1
    pageslist[index]=element
  });
  }
  tableData.value=pageslist
  console.log(tableData.value)

}).catch(res => {
                ElMessage({
                    message: res,
                    type: 'error',
                })
            });

}
//  获取数据 --执行层
const getprojectzx =(getdatas)=>{
  getExecuteTaskPage(getdatas).then(res=>{
  console.log('res.data',res)
  pagescount.value=res.page.count
  currentPage3.value=res.page.pageNo
  pageSize3.value=res.page.pageSize

  let pageslist=[]
  if(getdatas.selectType==2){
    console.log('状态',getdatas.selectType)

    // 任务状态 (0待审核 1待领取 2进行中 3已完成 4已逾期)
     res.page.list.forEach((element,index) => {
    console.log('状态',element.projectStatus)
    if(element.taskStatus==1){
      element.taskStatus='待领取'
    }else if(element.taskStatus==2){
      element.taskStatus='进行中 '
    }else if(element.taskStatus==3){
      element.taskStatus='已完成'
    }else if(element.taskStatus==0){
      element.taskStatus='待审核'
    }else if(element.taskStatus==4){
      element.taskStatus='已逾期'
    }
    element.index=index+1
    pageslist[index]=element
  });
  }else{
  res.page.list.forEach((element,index) => {
    
    if(element.projectStatus==1){
      element.projectStatus='进行中'
    }else if(element.projectStatus==2){
      element.projectStatus='已完成'
    }else if(element.projectStatus==3){
      element.projectStatus='已逾期'
    }
    element.index=index+1
    pageslist[index]=element
  });
  }
  tableData.value=pageslist
  console.log(tableData.value)

}).catch(res => {
                ElMessage({
                    message: res,
                    type: 'error',
                })
            });

}
if(identity.value==2){
  getdatas.selectType=1
  jlcxz.value=1
  getproject(getdatas)

}else if(identity.value==3){
  jlcxz.value=1
   getdatas.selectType=1
  getproject(getdatas)
}else{
   getdatas.selectType=2
   jlcxz.value=2
  //  getdatas.projectStatus=0
  getprojectzx(getdatas)
}


 


// console.log(identity.value)

const projectdetails=ref(null)
const projectzt=ref(null)
// 表格点击事件
const cellclick=(row, column, event)=>{
  // console.log('12221')
  console.log(row.id)
  console.log(getdatas.selectType)
  
 if(getdatas.selectType==2){
   getWorkAssignDetails({userId:localStorage.getItem('userinfoId'),objId:row.id}).then(res=>{
    console.log(res)
    // projectdetails.value.getdetail(res.projectDetails)
    projectzt.value.getmessagedata(res.projectDetails)
   })
  //  details.value.getdetails()
  
}else if(getdatas.selectType==1){
  getProjectDetails({userId:localStorage.getItem('userinfoId'),objId:row.id}).then(res=>{
    console.log(res)
    console.log(identity.value,getdatas.selectType)
    if(identity.value==2 ){
      if(getdatas.selectType==1){
       projectdetails.value.getdetail(res.projectDetails)
       }
    }
    if(identity.value==3 ){
      if(getdatas.selectType==1){
       projectdetails.value.getdetail(res.projectDetails)
       }
    }
     
  }).catch(res => {
                ElMessage({
                    message: res,
                    type: 'error',
                })
            });
  
}else if(getdatas.selectType==3){
  console.log('getdatas.selectType',getdatas.selectType)
  // seecompleteproject
   projectzt.value.seecompleteproject(row.id)
}else if(getdatas.selectType==4){
  console.log('getdatas.selectType',getdatas.selectType)
  // seecompleteproject
   projectzt.value.seecompleteproject(row.id)
}

 }
  //  搜索
// beginDate
// endDate
// projectName

const exportClick = () => {
  console.log('111')
  if(identity.value==2||identity.value==3){
    getLeaderTaskPage({
  targetUserId:localStorage.getItem('userinfoId'),
  selectType:4,
  projectStatus:'',
  pageNo:'',
  pageSize:'',
  beginDate:'',
  endDate:'',
  projectName:'',
}).then(res=>{
  console.log('res.data',res)
  pagescount.value=res.page.count
  currentPage3.value=res.page.pageNo
  pageSize3.value=res.page.pageSize

  let pageslist=[]
  res.page.list.forEach((element,index) => {
    
    if(element.projectStatus==1){
      element.projectStatus='进行中'
    }else if(element.projectStatus==2){
      element.projectStatus='已完成'
    }else if(element.projectStatus==3){
      element.projectStatus='已逾期'
    }
    element.index=index+1
    pageslist[index]=element
  });
  tableData2.value=pageslist
  console.log(tableData.value)
  setTimeout(function(){
    var wb = XLSX.utils.table_to_book(document.querySelector('#my-table'));//关联don节点
	/* get binary string as output */
	var wbout = XLSX.write(wb, {
		bookType: 'xlsx',
		bookSST: true,
		type: 'array'
	})
	try {
		FileSaver.saveAs(new Blob([wbout], {
			type: 'application/octet-stream'
		}), '项目情况.xlsx')//自定义文件名
	} catch (e) {
		if (typeof console !== 'undefined') console.log(e, wbout);
	}
	return wbout
  },500)

}).catch(res => {
                ElMessage({
                    message: res,
                    type: 'error',
                })
            });

  }
  
  
  
  

	
};


    return {
      exportClick,
      pagescount ,
      projectdetails,
      cellclick,
      projectzt,
      // indexMethod,
      jlcxz,
      myimplement,
      department,
      ccmytask,
      getproject,
      mycerate,
      getdatas,
         identity,
        tableData,
        tableData2,
        search,
        filterTableData,
        filterTableData2,
        Search,
        isoverflow,
        pageSize3,
        currentPage3,
        handleSizeChange,
        handleCurrentChange,
        issearchshow,
        isshowsearch,
    };
  }
});
</script>
<style >
/* .el-table th.el-table__cell>.cell {
    white-space: nowrap; 
　　text-overflow: ellipsis; 
　　overflow: hidden; 
}
.el-table .cell{
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: normal;
    line-height: 23px;
    padding: 0 12px;
} */
.el-table__inner-wrapper::before{
    background-color: white;
}
.el-table__body{
    /* border-collapse: separate; */
     border-spacing:0px 15px;
     table-layout:auto !important;
}
.el-table tr{
background: #F2F5FA;
width: 1431px;
height: 48px;
overflow: hidden;

}
.el-table .el-table__cell{
    padding: 0;
}
.c-table{
 width: 1511px;
height: 936px;
margin-left: 45px;
margin-top: 120px;
background: #FFFFFF;
border-radius: 32px;
position: relative;
overflow: hidden;
}
.el-table--fit{
 width: 1431px;
 height: auto;
 margin: 0 auto;
}
.projects-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
}
.projects-title h1{
    width: 96px;
height: 36px;
font-size: 24px;
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
font-weight: bold;
color: #020113;
line-height: 36px;
margin-left: 35px;

}
.projects-title .projects-title-corj {
  height: 100%;
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  
}
.projects-title .projects-title-corj .projects-identity{
 
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
  width: auto;
height: 40px;
background: #F5F6FA;
border-radius: 20px;
text-align: center;
margin: 0px;
font-size: 18px;
font-weight: 400;
color: #020113;
 margin-left: 26px;
}
.projects-title .projects-title-corj .projects-identity div{
   width: 121px;
  height: 100%;
  margin: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.projects-title .projects-title-corj .projects-identity .cativite{
  width: 121px;
height: 36px;
background: #020113;
box-shadow: 0px 8px 48px 0px rgba(1,7,19,0.1500);
border-radius: 20px;
color: white;
}
.projects-title div{
width: 56px;
height: 56px;
margin-right: 35px;
}
.projects-title div img{
 width: 56px;
height: 56px;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
    border: none;
}
/* 搜索 */
.c-shousuo{
    width: 1431px;
    height: auto;
    display: flex;
    margin-left: 35px;
    align-items: center;
    margin-top: 10px;
}
.show{
  display: flex;
}
.c-shousuo div{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 20px;
}
.c-shousuo div .c-input-name{
    width: 78px;
    height: 28px;
    font-size: 18px;
    font-weight: 400;
    color: #020113;
    line-height: 28px;
}
.c-shousuo div .el-inputr{
    width: 80px;
    height: 40px;
    border-radius: 8px;
}
.c-shousuo div .el-input__wrapper{
    width: 80px;
    height: 40px;
    border-radius: 8px;
    
}
.el-date-editor.el-input, .el-date-editor.el-input__wrapper{
     width: 80px;
    height: 40px;
    border-radius: 8px;
}
.c-shousuo .c-bt-project{
    font-size: 18px;
    display: flex;
    justify-content: right;
    padding-right: 0px;
}
.c-query{
   width: 100px;
height: 40px;
background: #020113;
border-radius: 8px;
color: white;
}
.c-reset{
width: 100px;
height: 40px;
background: #F2F5FA;
border-radius: 8px;
margin-left: 20px;
}
.c-liunt{
    width: 1511px;
    height: 4px;
    background: #F2F5FA;
    margin: 30px auto;
}
/* .el-table td.el-table__cell div{
 white-space: nowrap; 
 overflow: hidden;
 text-overflow: ellipsis;
} */
/* white-space: nowrap; 
 overflow: hidden;
 text-overflow: ellipsis; */
 .c-pages-tb{
    position: absolute;
    bottom: 30px;
    width: auto;
    right: 30px;
 }
 .el-pager li{
  color: #A4A5AB;
}
.el-pager li.is-active{
  background: #F2F5FA;
  border-radius: 6px;
  border: none;
  color: #020113;
}
::deep(.el-pagination.is-background .el-pager li:link) {
    outline: none;
}
::deep(.el-pagination.is-background .el-pager li:hover) {
    outline: none;
}
::deep(.el-pagination.is-background .el-pager li:not(.disabled).visited) {
    outline: none;
}
::deep(.el-pagination.is-background .el-pager li:active) {
    outline: none;
}
::deep(.el-pagination.is-background .el-pager li:focus) {
    outline: none;
}

/* 表格 */
.el-input__inner{
  font-size: 18px;
  height: 100%;
}
.el-table{
  font-size: 18px;
}
.el-table .cell{
  line-height: 23px;
}
.el-select__popper .el-select-dropdown__wrap{
max-height: 274px;
}
.el-select-dropdown{
  min-width: 308px;
}

.el-date-picker{
  width: 322px;
}
.el-picker-panel__icon-btn{
  font-size: 12px;
  margin-top: 8px;
}
.el-date-picker__header-label{
  font-size: 16px;
  line-height: 30px;
  padding: 0 5px;
}
.el-date-picker .el-picker-panel__content{
      width: 292px;
}
.el-date-table{
  font-size: 12px;
}
.el-select-dropdown__item{
  font-size: 12px;
  padding: 0 32px 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
}
.el-date-table td{
      width: 32px;
    height: 30px;
    padding: 4px 0;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.el-date-table td .el-date-table-cell .el-date-table-cell__text{
      width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    line-height: 24px;
    position: absolute;

}
.el-date-table th{
      padding: 5px;
}
.el-icon{
  font-size: 20px;
}
/* .plus-icon-enter{
opacity: 0;
}
.plus-icon-leave{
opacity: 1;
} */
.plus-icon-leave-active,.plus-icon-enter-active{
transition: opacity .5s;
}
/* .plus-icon-leave-to{
opacity: 0;
}
.plus-icon-enter-to{
opacity: 1;
} */
.plus-icon-enter, .plus-icon-leave-to{
  opacity: 0;
}
.plus-icon-leave, .plus-icon-enter-to{
  opacity: 1;
}
/* .fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
} */
.fade-enter-active {
  animation: bounce-in .5s;
}
.fade-leave-active {
  animation: bounce-in .5s reverse;
}
.projects-identity{
  display: flex;

}




.project-picker .el-input__inner{
  width: 500px;
  /* height: 48px; */
}
.project-picker .el-input__wrapper{
  /* margin-top: 5px; */
  box-shadow: none;
}
.project-picker-zi .el-input__wrapper{
  margin-top: 5px;
  box-shadow: none;
}
.project-picker-zi .el-input__inner{
  width: 500px;
  /* height: 48px; */
}
.el-pagination{
  font-size: 18px;
}
.el-pager li{
  font-size:18px;
  padding: 0 4px;
  min-width: 35px;
  height: 35px;
}
.el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon{
      font-size: 18px;
    font-weight: 700;
    line-height: 18px;
}
.el-pagination button, .el-pagination span:not([class*=suffix]){
  font-size: 18px;
}
.el-pagination__editor.el-input .el-input__inner{
  height: 35px;
}
.el-pagination__jump .el-input__inner{
  padding: 0 3px;
}
.el-pagination__editor.el-input{
  width: 50px;
}
.el-pagination__editor{
  line-height:18px;
  margin:0 8px;
      min-width: 56px;
      height: 35px;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.el-date-editor.el-input,  .el-date-editor.el-input__wrapper{
width: 100%;
height: 100%;
border-radius: 8px;
}
.project-picker .el-input__suffix-inner{
  position: absolute;
  /* height: 48px; */
  right: 10px;
  top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.projects-title .shuorsou{
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}
.projects-title .shuorsou .dchu-exel{
  width: 100px;
  height: 40px;
  background: #020113;
  border-radius: 8px;
  color: white;
  text-align: center;
  line-height: 40px;
}
#my-table{
 /* display: none;  */
 opacity: 0;
 display: none;
}
</style>